<template>
	<view>
		<map style="width: 100%; height: 1500rpx;" 
		v-if="params.latitude"
		:latitude="params.latitude"
		:show-location="true"
		:longitude="params.longitude"
		:markers="params.markers" scale="13">
		</map>
		<u-button type="primary" class="alarm" @touchstart="touchstart" @touchend="touchend">长按3秒报警</u-button>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				params: {
					latitude: '',
					longitude: '',
					markers: []
				},
				// 存储报警时间
				alarmStartTime: 0,
			}
		},
		onShow:function(){
			this.getLocation();
		},
		methods: {

			//获取当前位置
			getLocation: function() {
				let _self = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						_self.$commonData.wx_position(_self, res, function(datas) {
							_self.params.longitude = res.longitude;
							_self.params.latitude = res.latitude;
						});
					},
					fail: function() {
						_self.params.latitude = '28.697481';
						_self.params.longitude = '115.97125';
					}
				});
			},
			//报警开始
			touchstart: function() {
				console.log("按键开始.....", (new Date()).getTime());
				this.alarmStartTime = (new Date()).getTime();
			},
			touchend: function() {
				console.log("按键结束.....", (new Date()).getTime());
				let touchTime = (new Date()).getTime() - (this.alarmStartTime + 3000);
				if (touchTime > 0) {
					this.$refs.uToast.show({
						title: '报警成功',
					});
				} else {
					this.$refs.uToast.show({
						title: '报警失败',
					});
				}
			}



		}
	}
</script>

<style lang="scss" scoped>
	.alarm {
		position: absolute;
		width: 300upx;
		line-height: 88upx;
		background-color: #3c6cfc;
		box-shadow: 0px 1px 17px 0px rgba(3, 0, 0, 0.2);
		border-radius: 44px;
		bottom: 50upx;
		left: 50%;
		margin-left: -150upx;
		text-align: center;
		color: #fff;
	}
</style>
